﻿@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Default.cshtml";
}
<div class="main-content" style="background-color:#fff;">
    <div class="container-fluid">
    <div class="page-content">
        <div class="row" style="padding: 0 40px 0;">
            <div class="col-xs-12">
                <p>
                    <a href="#snacks" class="btn btn-app btn-yellow">
                        <i class="icon-heart bigger-230"></i>小吃、零食
                    </a>
                    <a href="#cake" class="btn btn-app btn-pink">
                        <i class="icon-food bigger-230"></i>饼面
                    </a>
                    <a href="#drink" class="btn btn-app btn-primary">
                        <i class="icon-coffee bigger-230"></i>营养饮品
                    </a>
                    <a href="#other" class="btn btn-app btn-success">
                        <i class="icon-undo bigger-230"></i>其他
                    </a>
                    <button class="btn btn-app btn-danger btn-sm">
                        <i class="icon-android bigger-200"></i>安卓支持
                    </button>
                    <button class="btn btn-app btn-info btn-sm" title="更多精彩即将来临">
                        <i class="icon-edit bigger-200"></i>...
                    </button>
                    <button class="btn btn-app btn-purple btn-sm" title="更多精彩即将来临">
                        <i class="icon-cloud-upload bigger-200"></i>...
                    </button>
                    <button class="btn btn-app btn-pink btn-sm" title="更多精彩即将来临">
                        <i class="icon-share-alt bigger-200"></i>...
                    </button>
                    <button class="btn btn-app btn-inverse btn-xs" title="更多精彩即将来临">
                        <i class="icon-lock bigger-160"></i>...
                    </button>
                    <button class="btn btn-app btn-grey btn-xs radius-4" title="更多精彩即将来临">
                        <i class="icon-lightbulb bigger-160"></i>...
                    </button>
                    <button class="btn btn-app btn-light btn-xs" title="更多精彩即将来临">
                        <i class="icon-circle-blank bigger-160"></i>...
                    </button>
                    <a href="#" class="btn btn-app btn-yellow btn-xs" title="更多精彩即将来临">
                        <i class="icon-shopping-cart bigger-160">
                    </i>... </a>
                </p>
            </div>
        </div>
        <div class="page-header" style="border-top: 1px dotted #e2e2e2">
            <a id="snacks" name="snacks"></a>
            <h1 style="color: #892e65;">
                时尚小吃 <small><i class="icon-double-angle-right"></i>responsive photo gallery using colorbox
                </small>
            </h1>
        </div>
        @{
            Dictionary<int, List<CollegeShop.Infrastructure.Entities.Entity.SaleList>> saleList = ViewBag.SaleList;
        }
        <div class="row" style="padding: 0 40px 0;">
            <div class="col-xs-12">
                <!-- PAGE CONTENT BEGINS -->
                    <ul class="ace-thumbnails">
                        @{if (saleList.ContainsKey(1))
                          {
                              var xiaochi = saleList[1];
                              if (xiaochi != null && xiaochi.Any())
                              {
                                foreach(var item in xiaochi)
                                {
                                    <li class="commodity"><a href="javascript:;" class="showdetail" detail-title="@item.Title" detail-id="@item.Id">
                                        <img class="productimage" alt="" src="@item.Resource.Path" />
                                        <div class="text">
                                            <div class="inner">
                                                @item.Title</div>
                                        </div>
                                        <div class="tags">
                                            <span class="label-holder"><span class="label label-warning arrowed-in">￥@item.Price.ToString("F2")</span>
                                            </span>
                                        </div>
                                    </a></li>
                                }
                              }
                          }
                          }
                    </ul>
                <!-- PAGE CONTENT ENDS -->
            </div>
            <!-- /.col -->
        </div>
        <div class="page-header">
            <a id="cake" name="cake"></a>
            <h1>
                充饥必备 <small><i class="icon-double-angle-right"></i>responsive photo gallery using colorbox
                </small>
            </h1>
        </div>
        <div class="row" style="padding: 0 40px 0;">
            <div class="col-xs-12">
                <!-- PAGE CONTENT BEGINS -->
                <div class="row-fluid">
                    <ul class="ace-thumbnails">
                        @{if (saleList.ContainsKey(2))
                          {
                              var mianbing = saleList[2];
                              if (mianbing != null && mianbing.Any())
                              {
                                  foreach (var item in mianbing)
                                {
                                    <li class="commodity"><a href="javascript:;" class="showdetail" detail-title="@item.Title" detail-id="@item.Id">
                                        <img class="productimage" alt="" src="@item.Resource.Path" />
                                        <div class="text">
                                            <div class="inner">
                                                @item.Title</div>
                                        </div>
                                        <div class="tags">
                                            <span class="label-holder">
                                                <span class="label label-warning arrowed-in">￥@item.Price.ToString("F2")</span>
                                            </span>
                                        </div>
                                    </a></li>
                                }
                              }
                          }
                          }
                    </ul>
                </div>
                <!-- PAGE CONTENT ENDS -->
            </div>
            <!-- /.col -->
        </div>
        <div class="page-header">
            <a id="drink" name="drink"></a>
            <h1 style="color: #063;">
                营养饮品 <small><i class="icon-double-angle-right"></i>responsive photo gallery using colorbox
                </small>
            </h1>
        </div>
        <div class="row" style="padding: 0 40px 0;">
            <div class="col-xs-12">
                <!-- PAGE CONTENT BEGINS -->
                <div class="row-fluid">
                    <ul class="ace-thumbnails">
                        @{if (saleList.ContainsKey(3))
                          {
                              var yinliao = saleList[3];
                              if (yinliao != null && yinliao.Any())
                              {
                                  foreach (var item in yinliao)
                                {
                                    <li class="commodity"><a href="javascript:;" class="showdetail" detail-title="@item.Title" detail-id="@item.Id">
                                        <img class="productimage" alt="" src="@item.Resource.Path" />
                                        <div class="text">
                                            <div class="inner">
                                                @item.Title</div>
                                        </div>
                                        <div class="tags">
                                            <span class="label-holder"><span class="label label-warning arrowed-in">￥@item.Price.ToString("F2")</span>
                                            </span>
                                        </div>
                                    </a></li>
                                }
                              }
                          }
                          }
                    </ul>
                </div>
                <!-- PAGE CONTENT ENDS -->
            </div>
            <!-- /.col -->
        </div>
        <div class="page-header">
            <a id="other" name="other"></a>
            <h1 style="color: #09c;">
                其他 <small><i class="icon-double-angle-right"></i>responsive photo gallery using colorbox
                </small>
            </h1>
        </div>
        <div class="row" style="padding: 0 40px 0;">
            <div class="col-xs-12">
                <!-- PAGE CONTENT BEGINS -->
                <div class="row-fluid">
                    <ul class="ace-thumbnails">
                        @{if (saleList.ContainsKey(4))
                          {
                              var qita = saleList[4];
                              if (qita != null && qita.Any())
                              {
                                  foreach (var item in qita)
                                {
                                    <li class="commodity"><a href="javascript:;" class="showdetail" detail-title="@item.Title" detail-id="@item.Id">
                                        <img class="productimage" alt="" src="@item.Resource.Path" />
                                        <div class="text">
                                            <div class="inner">
                                                @item.Title</div>
                                        </div>
                                        <div class="tags">
                                            <span class="label-holder"><span class="label label-warning arrowed-in">￥@item.Price.ToString("F2")</span>
                                            </span>
                                        </div>
                                    </a></li>
                                }
                              }
                          }
                          }
                    </ul>
                </div>
                <!-- PAGE CONTENT ENDS -->
            </div>
            <!-- /.col -->
        </div>
    </div>
    </div>
    <!-- /.page-content -->
</div>
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
    aria-hidden="true">
    <input type="hidden" id="hidcommodityId" />
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
            ×</button>
        <h3 id="myModalTitle">
            header</h3>
    </div>
    <div id="commodityloadding" style="height:230px; text-align:center;">
        <div style="width:50px; margin-left:auto; margin-right:auto; padding-top:60px;">
            <i class="loading"></i>
        </div>
    </div>
    <div id="commoditydetail" class="detail hide">
    <div class="modal-body">
        <div id="user-profile-1" class="user-profile row-fluid">
            <div class="span5 center">
                <div>
                    <span style="width:180px;" class="profile-picture">
                        <img id="commoidtyimage" alt="" style="width:180px;height:180px;" class="editable img-responsive" />
                    </span>
                    <div class="space-4">
                    </div>
                    <div class="width-80 label label-info label-xlg arrowed-in arrowed-in-right">
                        <div class="inline position-relative" id="commodityTitle" style="line-height:30px;">
                        </div>
                    </div>
                </div>
                <div class="hr hr12 dotted"></div>
                <div class="clearfix">
                    <p id="standardbox" style="text-align:left;">
                    </p>
                    <p id="stylebox" style="text-align:left;">
                    </p>
                </div>
            </div>
            <div class="span7">
                <div class="profile-user-info profile-user-info-striped">
                    <div class="profile-info-row">
                        <div class="profile-info-name">
                            库存：
                        </div>
                        <div class="profile-info-value">
                            <span class="green bolder">库存充足</span>
                        </div>
                    </div>
                    <div class="profile-info-row">
                        <div class="profile-info-name">
                            价格：
                        </div>
                        <div class="profile-info-value">
                            <span id="commodityPrice"></span>
                        </div>
                    </div>
                    <div class="profile-info-row">
                        <div class="profile-info-name">
                            包装：
                        </div>
                        <div class="profile-info-value">
                            <span id="commodityUnit"></span>
                        </div>
                    </div>
                    <div class="profile-info-row">
                        <div class="profile-info-name">
                            描述：
                        </div>
                        <div class="profile-info-value">
                            <span id="commodityDescription"></span>
                        </div>
                    </div>
                    <div class="profile-info-row">
                        <div class="profile-info-name">
                            说明：
                        </div>
                        <div class="profile-info-value">
                            <p>单笔订单5元免费配送</p>
                            <p>确认订单后10分钟送达</p>
                        </div>
                    </div>
                </div>
                <div class="space-20">
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <a href="javascript:;" onclick="gobuy()" class="btn btn-primary">立即购买</a>
        <input type="button" id="btnaddbuy" data-placement="top" data-content="<span class=green>添加成功</span>" 
        data-html="true" data-trigger="click"
        onclick="addbuy()" class="btn btn-warning" value="加入购物车" />
        <a href="javascript:;" class="btn" data-dismiss="modal" aria-hidden="true">关闭</a>
    </div>
    </div>
</div>
@section tail{
<script type="text/javascript">
    var commodities;
    function gobuy() {
        addbuy();
        window.location.href = "/home/cart";
        if ($.browser.msie && $.browser.version == 6) {
            window.event.returnValue = false; 
        }
    }
    var timeOutAction;
    function addbuy() {
        if (!parseInt($('#hidcommodityId').val(), 10)) {
            return;
        }
        var cart = getCookie('goodscart');
        if (ishas(unescape(cart).split(','), $('#hidcommodityId').val())) {
            return;
        }
        var count = 0;
        if (!cart) {
            setCookie('goodscart', $('#hidcommodityId').val() + ',');
            count = 1;
        }
        else {
            var goods = cart.split(',');
            goods.push($('#hidcommodityId').val());
            goods = distinct(goods);
            count = goods.length;
            cart = goods.join();
            setCookie('goodscart', cart);
        }
        $('#cmdcount').text(count);
        if ($('.noncommodity').length > 0) {
            $('.noncommodity').remove();
        }
        $('#cartbox').children('li.dropdown-header').after(
            $('<li />').append(
                $('<a href="javascript:;" />').append(
                    $('<img alt="' + $('#commoidtyimage').attr('alt') + '" src="' + $('#commoidtyimage').attr('src') + '" class="msg-photo" />')
                ).append(
                    $('<span class="msg-body" />').append(
                        $('<span class="msg-title">'+$('#commodityTitle').text()+'</span>')
                    ).append(
                        $('<span class="msg-time" />').append(
                            $('<i class="icon-angle-right"></i>&nbsp;')
                        ).append(
                            $('<span class="red bolder">' + $('#commodityPrice').text() + '</span>')
                        )
                    )
                ))
        );
        $('#cartboxtocart').attr('href', '/home/cart');
        timeOutAction = window.setTimeout(function () {
            if ($('.popover-content').length != 0) {
                $('#btnaddbuy').popover('hide');
            } else {
                window.clearTimeout(timeOutAction);
            }
        }, 2000);
        return false;
    }
    function changeStyle(sender, type, value) {
        $('#commoditydetail').hide();
        $('#commodityloadding').children('div').html('<i class="loading"></i>');
        $('#commodityloadding').show();

        $(sender).removeClass('btn-info').addClass('btn-success').siblings().each(function () {
            $(this).removeClass('btn-success').addClass('btn-info');
        });
        var arr, elements;
        if (type == 'standard') {
            arr = findfromarr(commodities.SdGroup, '.Key=="' + value + '"', '.Contain');
            elements = $('.style');
        }
        else if (type = 'style') {
            arr = findfromarr(commodities.SyGroup, '.Key=="' + value + '"', '.Contain');
            elements = $('.standard');
        }
        for (var i = 0, len = elements.length; i < len; i++) {
            if (ishas(arr, $(elements[i]).val())) {
                $(elements[i]).removeClass('disabled').removeAttr('disabled');
            }
            else {
                $(elements[i]).removeClass('btn-success').addClass('btn-info disabled').attr('disabled', 'disabled');
            }
        }

        if ($('.style.btn-success').length == 0) {
            $('.style').each(function () {
                if (!$(this).attr('disabled')) {
                    $(this).removeClass('btn-info').addClass('btn-success').siblings().each(function () {
                        $(this).removeClass('btn-success').addClass('btn-info');
                    });
                    return;
                }
            });
        }

        if ($('.standard.btn-success').length == 0) {
            $('.standard').each(function () {
                if (!$(this).attr('disabled')) {
                    $(this).removeClass('btn-info').addClass('btn-success').siblings().each(function () {
                        $(this).removeClass('btn-success').addClass('btn-info');
                    });
                    return;
                }
            });
        }

        var data = getSelectedCommoidty($('.style.btn-success').val(), $('.standard.btn-success').val());
        if (!data) {
            $('#commodityloadding').children('div').css({
                width: '150px'
            }).html('<h5 style="color:red;">该商品不存在或已经下架</h5>');
            return;
        }
        if (setCommodityInfo(data)) {
            $('#commodityloadding').hide();
            $('#commoditydetail').fadeIn(300, function () { });
        }
        else {
            $('#commodityloadding').children('div').css({
                width: '150px'
            }).html('<h5 style="color:red;">该商品不存在或已经下架</h5>');
            return;
        }
    }
    function setCommodityInfo(data) {
        if (data && data.ID) {
            $('#hidcommodityId').val(data.ID);
            $('#commoidtyimage').attr('src', data.Resource.Path).attr('alt', data.GoodsTitel);
            $('#myModalTitle').text(data.GoodsTitel);
            $('#commodityTitle').text(data.GoodsTitel);
            $('#commodityPrice').text(data.DefaultSalePrice.toFixed(2) + '/' + data.Unit);
            $('#commodityUnit').text(data.Standard + ' - ' + data.Unit);
            $('#commodityDescription').html(data.GoodsDescription);
            return true;
        }
        return false;
    }
    function getSelectedCommoidty(style,standard) {
        var data;
        for (var i = 0, len = commodities.Data.length; i < len; i++) {
            if (commodities.Data[i].Standard == standard && commodities.Data[i].Style == style) {
                data = commodities.Data[i];
                break;
            }
        }
        if (data) {
            return data;
        }
        return null;
    }
    function initStyleAndStandard() {
        var standards = $('.standard');
        var style = $('.style');
        if (standards.length > 0) {
            standards.eq(0).trigger('click');//.removeClass('btn-info').addClass('btn-success');
        }
    }
    $(function () {
        $('#btnaddbuy').popover();
        $('.showdetail').each(function () {
            $(this).click(function () {
                var title = $(this).attr('detail-title');
                $('#commoditydetail').hide();
                $('#commodityloadding').show();
                $('#myModalTitle').text(title);
                $('#myModal').modal();
                $.ajax({
                    url: '/home/saledetail/',
                    data: {
                        saleId: $(this).attr('detail-id')
                    },
                    type: 'get',
                    dataType: 'json',
                    success: function (data) {
                        if (data) {
                            commodities = data;
                            $('#stylebox').html('');
                            $('#standardbox').html('');
                            var standard = '';
                            for (var i = 0, len = data.Standard.length; i < len; i++) {
                                standard += '<input type="button" class="standard btn btn-info btn-mini margin4" onclick="changeStyle(this,\'standard\',\'' + data.Standard[i] + '\')" value="' + data.Standard[i] + '" />';
                            }
                            $('#standardbox').html(standard);

                            var style = '';
                            for (var i = 0, len = data.Style.length; i < len; i++) {
                                style += '<input type="button" class="style btn btn-info btn-mini margin4" onclick="changeStyle(this,\'style\',\'' + data.Style[i] + '\')" value="' + data.Style[i] + '" />';
                            }
                            $('#stylebox').html(style);
                            initStyleAndStandard();
                        }
                        else {
                            $('#commodityloadding').children('div').css({
                                width: '150px'
                            }).html('<h5 style="color:red;">该商品不存在或已经下架</h5>');
                        }
                    },
                    error: function () {
                        $('#commodityloadding').children('div').css({
                            width: '150px'
                        }).html('<h5 style="color:red;">商品加载失败，请稍后再试</h5>');
                    }
                });
            });
        });
    });
</script>
}